<template>
  <el-dialog
    top="30px"
    width="800px"
    append-to-body
    title="催收记录"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <el-form class="query-table-form">
      <el-form-item class="float-right">
        <el-button icon="el-icon-plus" @click="handleEdit()">新增催收</el-button>
      </el-form-item>
    </el-form>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <register-edit
      :visible.sync="editVisible"
      :table-id="tableId"
      :query-id="queryId"
      :view-mode="viewMode"
    ></register-edit>
  </el-dialog>
</template>

<script>
import RegisterEdit from '@/credit/views/city/risk/collection/component/register/MainDialog'
export default {
  components: {
    RegisterEdit,
  },
  props: {
    visible: Boolean,
    queryId: String,
  },
  data() {
    return {
      tableName: 'collection_register',
      loading: false,
      tableData: [],
      tableColumns: [
        { attrs: { label: '催收时间', prop: 'register_time', align: 'center' } },
        { attrs: { label: '逾期金额', prop: 'overdue_funds', align: 'center' } },
        { attrs: { label: '本次催回金额', prop: 'current_coll_funds', align: 'center' } },
        { attrs: { label: '通知人员', prop: 'notice_person', align: 'center' } },
        { attrs: { label: '登记人', prop: 'submit_person_name', align: 'center' } },
        {
          attrs: { label: '登记时间', prop: 'create_time', align: 'center', width: '100px' },
          process: v => this.$utils.dateFormat(v, 'yyyy-MM-dd hh:mm'),
        },
        {
          attrs: { label: '操作', align: 'center', width: 100 },
          operations: [
            {
              content: '编辑',
              icon: 'fa fa-edit',
              event: this.handleEdit,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
            },
          ],
        },
      ],
      editVisible: false,
      tableId: '',
      viewMode: false,
    }
  },
  computed: {},
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleEdit(row = {}) {
      this.editVisible = true
      this.viewMode = false
      this.tableId = row.collection_register_id || ''
    },
    handleView(row = {}) {
      this.editVisible = true
      this.viewMode = true
      this.tableId = row.collection_register_id || ''
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
    getData() {
      this.tableData = []
      if (!this.queryId) {
        return
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, { 'customer_related_id.eq': this.queryId })
        .then(res => {
          this.tableData = res?.data ?? []
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
